<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形角度</title>
<style>
.box {
  margin-top: 100px;
}

area {
    cursor: pointer;
 
}
</style>
</head>
<body>

<div class="box">
    <img src="../resources/images/2.png" alt="三角形图片"  class="img1" usemap="#triangleMap1" style="width: 300px; height: 300px;">
<map name="triangleMap1">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle(2)">
    <!-- 右下角 -->
    <area shape="circle" coords="280,260,40" onclick="showAngle(3)">
</map>

<img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,200" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map>
<img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map>
<img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map>
<img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map><img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map><img src="../resources/images/3.png" alt="三角形图片" class="img2" usemap="#triangleMap2" style="width: 300px; height: 300px;">
<map name="triangleMap2">
    <!-- 右上角 -->
    <area shape="circle" coords="300,20,40" onclick="showAngle2(1)" >
    <!-- 左下角 -->
    <area shape="circle" coords="20,300,40" onclick="showAngle2(2)">
    <!-- 右下角 -->
    <area shape="circle"coords="280,300,40" onclick="showAngle2(3)">
</map>
</div>
<script>
function showAngle(angleId) {
    var angle;
    switch(angleId) {
        case 1:
            angle = 45;
            break;
        case 2:
            angle = 45;
            break;
        case 3:
            angle = 90;
            break;
        default:
            angle = 'Unknown';
    }
    alert("这个角的度数是：" + angle + "°");
}
function showAngle2(angleId) {
    var angle;
    switch(angleId) {
        case 1:
            angle = 30;
            break;
        case 2:
            angle = 60;
            break;
        case 3:
            angle = 90;
            break;
        default:
            angle = 'Unknown';
    }
    alert("这个角的度数是：" + angle + "°");
}
</script>

</body>
</html>
